<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script src="/lib/echarts.min.js"></script>
    <script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>


    <style type="text/css">
            #choose {
                margin-left:40px;
            }

            #divOfButton {
                margin-left:30px;
            }

        </style>
</head>
<body>


        

    
    <span id="choose">
        <label>查看该年份的财务报表:</label>
            <select name = "year" id="chooseYear">
                <option value = "2020">2020</option>
                <option value = "2021">2021</option>
                <option value = "2022" selected>2022</option>
                <option value = "2023">2023</option>
        </select>
    </span>

    <span id="divOfButton"> <button type="button" class="layui-btn"  id="btn">确定</button><span>
   

    <br><br>
    <div id="container" style="width: 900px;height:500px;"></div>


<script>

    $("#btn").click(function() {

        $.ajax( {

                    url: "http://localhost:8080/assets/yearlyFinancialStatements?" + $("#chooseYear").serialize(),
                    type: "get",
                    dataType: "json",
                    success: function(data) {

                        // 用来作为y轴的最大值
                        var maximumForYAxis = data.code;

                        var everyMonth = [];
                        var sumOfIncome = [];
                        var sumOfExpenditure = [];
                       
                            for(var i = 0; i < data.data.length; i++) {
                                everyMonth.push(data.data[i].everyMonth);
                                sumOfIncome.push(data.data[i].sumOfIncome);
                                sumOfExpenditure.push(data.data[i].sumOfExpenditure);
                            }

                            

                            // 基于准备好的dom，初始化echarts实例
                            var myChart = echarts.init(document.getElementById('container'));
                            var sexData = window.localStorage.getItem("sexRatio");

                            //********************************************************************************//
                            option = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                    type: 'cross',
                                    crossStyle: {
                                        color: '#999'
                                    }
                                    }
                                },
                                
                                
                                toolbox: {
                                    feature: {
                                    dataView: { show: true, readOnly: false },
                                    magicType: { show: true, type: ['line', 'bar'] },
                                    restore: { show: true },
                                    saveAsImage: { show: true }
                                    }
                                },
                                
                                
                                legend: {
                                    data: ['资金收入', '资金支出']
                                },
                                
                                
                                xAxis: [
                                    {
                                    type: 'category',
                                    data: [1+'月', 2+'月', 3+'月', 4+'月', 5+'月', 6+'月', 7+'月', 8+'月', 9+'月', 10+'月', 11+'月', 12+'月'],
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                    }
                                ],
                                
                                
                                
                                
                                yAxis: [
                                    {
                                    type: 'value',
                                    name: '资金收支',
                                    min: 0,
                                    max: maximumForYAxis,
                                    interval: maximumForYAxis / 10,
                                    axisLabel: {
                                        formatter: '{value} 元'
                                    }
                                    },
                                ],
                                
                                
                                
                                series: [
                                    {
                                    name: '资金收入',
                                    type: 'bar',
                                    tooltip: {
                                        valueFormatter: function (value) {
                                        return value + ' 元';
                                        }
                                    },

                                    data: sumOfIncome
                        
                                    },
                                    {
                                    name: '资金支出',
                                    type: 'bar',
                                    tooltip: {
                                        valueFormatter: function (value) {
                                        return value + ' 元';
                                        }
                                    },

                                    data: sumOfExpenditure
                                    },

                                ]
                                };
     

                            // 使用刚指定的配置项和数据显示图表。
                            myChart.setOption(option);
 

                    },
                    xhrFields: {
                        withCredentials:true 
                    }
                }
            );
   






    })
</script>



</body>
</html>